<template>
  <div class="demo-container">
    <h2>文件附件展示组件</h2>
    <FileList :files="files" @download="handleDownload">
      <template #file-icon="{file}">
        <template v-if="['mp4','avi','mov'].includes(file.type)">
          <VideoCameraOutlined/>
        </template>
      </template>
      <template #preview="{previewImage, visible, close}">
        <ImagePreview :img-list="[previewImage]"
                      :visible="visible"
                      :currentIndex="currentIndex"
                      @update:current-index="setCurrentIndex"
                      @download="download"
                      @close="close"/>
      </template>
    </FileList>
  </div>
  <div>
    <ImagePreview :img-list="imageList"
                  :visible="visible"
                  :currentIndex="currentIndex"
                  @update:current-index="setCurrentIndex"
                  @download="download"
                  @close="visible = false"
    ></ImagePreview>
  </div>
  <a-button @click="visible = true">打开图片预览</a-button>
  <a-button @click="previewEvent">预览图片</a-button>
  <a-button @click="handleVPreview">v-preview-image</a-button>
  <fc-designer ref="designer" height="100vh" />
</template>

<script setup lang="ts">
import FileList from './components/file/file-list.vue';
import {VideoCameraOutlined} from '@ant-design/icons-vue';
import {ref} from 'vue';
import ImagePreview from "@/components/image/image-preview.vue";
import {preview} from "vue3-image-preview";
import {preview as vPreview} from 'v-preview-image'


const currentIndex = ref(0);
const visible = ref(false);
const designer = ref(null);

const imageList = ref([
  '../src/assets/测试.jpg',
  '../src/assets/img2.jpeg'
]);

// 模拟文件数据
const files = ref([
  {
    name: '产品设计图.jpg',
    type: 'jpg',
    size: 2456789,
    url: 'https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAIYEGg8DCUBmzG-9Cbo2GD7u-7dgtM4AAKnFAACXczgVZ2Idt3QDdqgNgQ.jpg'
  },
  {
    name: '测试.jpg',
    type: 'jpg',
    size: 2456789,
    url: '../src/assets/测试.jpg'
  },
  {
    name: '用户手册.pdf',
    type: 'pdf',
    size: 3567890,
    url: 'https://example.com/docs/user-manual.pdf'
  },
  {
    name: '季度报表.xlsx',
    type: 'xlsx',
    size: 123456,
    url: 'https://example.com/docs/q3-report.xlsx'
  },
  {
    name: '项目文档.docx',
    type: 'docx',
    size: 789012,
    url: 'https://example.com/docs/project-doc.docx'
  },
  {
    name: '源代码压缩包.zip',
    type: 'zip',
    size: 4567890,
    url: 'https://example.com/downloads/source-code.zip'
  },
  {
    name: '这是一个非常非常非常非常非常非常长非常长非常长非常长非常非常非常非常非常非常长非常长非常长非常长的文件名.txt',
    type: 'txt',
    size: 1024,
    url: 'https://example.com/docs/long-filename.txt'
  },
  {
    name: '音乐.mp3',
    type: 'mp3',
    size: 10024,
    url: 'https://example.com/docs/long-filename.txt'
  },
  {
    name: '视频.mp4',
    type: 'mp4',
    size: 10048,
    url: 'https://example.com/docs/long-filename.txt'
  },
  {
    name: 'PPT.ppt',
    type: 'ppt',
    size: 100048,
    url: 'https://example.com/docs/long-filename.txt'
  }
]);

// 处理下载事件
const handleDownload = (file: any) => {
  console.log('下载文件:', file.name);
// 这里可以添加实际的下载逻辑
  alert(`开始下载: ${file.name}`);
};

const setCurrentIndex = (index: number) => {
  currentIndex.value = index;
}

const download = (file: any) => {
  console.log('file: ', file);
}

const previewEvent = () => {
  preview({
    images: 'https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAIYEGg8DCUBmzG-9Cbo2GD7u-7dgtM4AAKnFAACXczgVZ2Idt3QDdqgNgQ.jpg',
  })
}

const handleVPreview = () => {
  vPreview(
      'https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAIYEGg8DCUBmzG-9Cbo2GD7u-7dgtM4AAKnFAACXczgVZ2Idt3QDdqgNgQ.jpg',
      ['https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAIYEGg8DCUBmzG-9Cbo2GD7u-7dgtM4AAKnFAACXczgVZ2Idt3QDdqgNgQ.jpg',
        '../src/assets/img2.jpeg']
  )
}
</script>

<style scoped lang="less">
.demo-container {
  max-width: 800px;
  height: 100%;
  margin: 20px auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.demo-container, .preview-section, .form-designer-section {
  width: 100%;
  //height: 100%;
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);

  h2, h3 {
    color: #333;
    margin-bottom: 16px;
    text-align: center;
    font-weight: 500;
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 18px;
  }
}

.file-list-container {
  margin-top: 12px;
}

.preview-thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 12px;

  .thumbnail {
    width: 100px;
    height: 100px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
    border: 1px solid #f0f0f0;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.form-designer-section {
  .form-designer-wrapper {
    //overflow: hidden;
    border-radius: 6px;
    border: 1px solid #e8e8e8;
  }

  .form-designer-container {
    min-height: 800px;
    background: #fff;
  }
}
</style>
